<template>
<!-- 密码设置 -->
  <div>
    <el-form :model="userForm" :rules="rules" ref="userForm" label-width="120px" size="small" class="user-info">
      <el-form-item label="登陆账号">
        <span>{{ userInfo.userName }}</span>
      </el-form-item>
      <el-form-item label="旧密码" prop="oldPwd">
        <el-input v-model="userForm.oldPwd" placeholder="请输入旧密码"></el-input>
        <p class="tips">注意：初始密码为12345678</p>
      </el-form-item>
      <el-form-item label="新密码" prop="pwd">
        <el-input v-model="userForm.pwd" placeholder="请输入新密码(6-14位字母和数字组合)" autocomplete="new-password" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPwd">
        <el-input v-model="userForm.confirmPwd" placeholder="请确认新密码" autocomplete="new-password" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSaveInfo('userForm')">完成设置</el-button>
        <el-button type="text" @click="dialogVisible = true">忘记旧密码？</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogVisible" title="忘记密码" width="400px" append-to-body>
      <findPwd/>
    </el-dialog>
  </div>
</template>
<script>
import { modifyUserPwd } from "@/api/login";
import { validatePassword } from "@/utils/validate";
import findPwd from "@/components/findPwd"

export default {
  name: "PassSet",
  components: {
    findPwd
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value && value !== this.userForm.pwd) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback()
      }
    };
    return {
      userForm: {
        oldPwd: '',
        pwd: '',
        confirmPwd: ''
      },
      rules: {
        oldPwd: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
      },
      dialogVisible: false,
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.xbsgUserInfo;
    },
  },
  methods:{
    // 设置密码
    handleSaveInfo (formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const params = {
            oldPwd: this.userForm.oldPwd,
            pwd: this.userForm.pwd,
            username: this.userInfo.userName
          }
          const res = await modifyUserPwd(params)
          if (res.code === 200) {
            this.message.success('保存成功')
            this.resetForm(formName)
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped lang='scss'>
@import "@/style/color.scss";
.user-info {
  width: 50%;
  margin-top: 20px;
}
.tips {
  font-size: 12px;
  color: #F56C6C;
  line-height: 16px;
}
::v-deep .el-dialog__body {
  padding: 20px 80px 50px;
}
</style>